<template>
  <!-- 模板部分无 px 单位，保持不变 -->
  <div class="page-body">
    <PageHeader />
    <div class="page-content p-20">
      <div class="left p-x-20">
        <div class="p-y-60 flex flex-col items-center">
          <image :src="logoCol" mode="widthFix" class="logo_col" />
        </div>
        <up-line color="#c8c7cc"> </up-line>
        <div class="w-100 font-size-18 p-t-15 p-b-42">
          <up-row :gutter="20" class="m-y-20">
            <up-col :span="4" textAlign="right" class="color-grey"
              >当前门店</up-col
            >
            <up-col :span="8">{{ commonStore.merchantName }}</up-col>
          </up-row>
          <up-row :gutter="20" class="m-y-20">
            <up-col :span="4" textAlign="right" class="color-grey"
              >收银员姓名</up-col
            >
            <up-col :span="8">{{ commonStore.userInfo.nickname }}</up-col>
          </up-row>
          <up-row :gutter="20" class="m-y-20">
            <up-col :span="4" textAlign="right" class="color-grey"
              >收银机编码</up-col
            >
            <up-col :span="8">{{ commonStore.posNo }}</up-col>
          </up-row>
          <up-row :gutter="20" class="m-y-20">
            <up-col :span="4" textAlign="right" class="color-grey"
              >登录时间</up-col
            >
            <up-col :span="8">{{
              $u.timeFormat(
                commonStore.userInfo.loginDate,
                "yyyy-mm-dd hh:MM:ss"
              )
            }}</up-col>
          </up-row>
        </div>

        <div @click="logout" class="logout-bt">
          <text class="iconfont icon-tuichu font-size-19 m-r-5"></text>
          <text>退出登录</text>
        </div>
      </div>
      <div class="right m-l-20 font-weight-700 p-x-47 p-y-53">
        <div class="flex flex-wrap gap-47">
          <div @click="utils.toUrl('/sales_cashier/index')" class="item">
            <image :src="logoCol_1" class="m-b-4" mode="widthFix" />
            <div class="font-size-24">销售收银</div>
          </div>
          <div @click="utils.toUrl('/document-log/document-log')" class="item">
            <image :src="logoCol_2" class="m-b-4" mode="widthFix" />
            <div class="font-size-24">单据记录</div>
          </div>
          <div @click="utils.toUrl('/cash_pay/cash_pay')" class="item">
            <image :src="logoCol_3" class="m-b-4" mode="widthFix" />
            <div class="font-size-24">现金缴款</div>
          </div>
          <div @click="utils.toUrl('/setting/setting')" class="item">
            <image :src="logoCol_4" class="m-b-4" mode="widthFix" />
            <div class="font-size-24">收银设置</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
</template>

<script setup>
// 脚本部分无 px 单位，保持不变
import { ref } from "vue";
import logoCol from "@/static/images/logo_col.png";
import logoCol_1 from "@/static/images/home-icon/0.png";
import logoCol_2 from "@/static/images/home-icon/1.png";
import logoCol_3 from "@/static/images/home-icon/2.png";
import logoCol_4 from "@/static/images/home-icon/3.png";
import { useCommonStore } from "../../store/common";
const commonStore = useCommonStore();
import utils from "@/utils/index";
import allApi from "../../api/index";

async function logout() {
  const res = await uni.showModal({
    title: "提示",
    content: "是否确认退出登录？",
    cancelText: "取消",
    confirmText: "确定",
  });
  if (res.confirm) {
    commonStore.logout();
    utils.toUrl("/pages/index/index", "reLaunch");
  }
}
</script>

<style lang="scss" scoped>
.page-body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  touch-action: none; /* 防止滑动或双指缩放 */
  background: #F0F2F5;
}
.page-content {
  flex: 1;
  height: 0;

  display: flex;
  .left,
  .right {
    background: $uni-bg-color;
  }
  .left {
    // 将 px 转换为 rpx
    width: 408.67rpx;
    border-radius: 13.33rpx;
    .logo_col {
      // 将 px 转换为 rpx
      width: 136rpx;
    }
    .logout-bt {
      left: 38rpx;
      top: 510.67rpx;
      margin: 0 38rpx;
      // 将 px 转换为 rpx
      height: 53.33rpx;
      opacity: 1;
      border-radius: 5.33rpx;
      background: $uni-color-primary;
      color: $uni-text-color-inverse;

      /** 文本1 */
      // 将 px 转换为 rpx
      font-size: 18.67rpx;
      font-weight: 500;
      letter-spacing: 0rpx;
      text-align: center;
      line-height: 53.33rpx;
    }
  }
  .right {
    flex: 1;
    width: 0;
    // 将 px 转换为 rpx
    border-radius: 13.33rpx;

    // display: flex;
    // flex-wrap: wrap;

    .item {
      // margin: 0 47px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      // 将 px 转换为 rpx
      width: 207.5rpx;
      height: 186rpx;
      border-radius: 13rpx;
      border: 1rpx solid $uni-text-color-disable;
      > image {
        // 将 px 转换为 rpx
        width: 107rpx;
      }
    }
  }
}
</style>
